/**
 * Created by Fesine on 2017/8/31.
 * 1、使用new Vue(){};
 * 2、添加el关键字 绑定作用域
 * 3、添加data关键字，创建变量数据
 * 4、添加methods关键字，添加方法
 * 5、添加mounted关键字，页面加载时调用方法
 * 6、添加filters关键字，过滤器
 */
// var vm = new Vue({
new Vue({
    el:"#app",
    data:{
        //json格式
        productList:[],
        totalMoney:0,
        checkAllFlag:false,
        delFlag:false,
        curProduct:null
    },
    //局部过滤器
    filters:{
        formatMoney:function (value) {
            //添加货币符号并保留两位小数
            return "￥" + value.toFixed(2);
        }

    },
    mounted:function () {
        this.$nextTick(function () {
                this.cartView();
        });
    },
    methods:{
        cartView:function () {
            // var _this=this;
            // //使用vue-resource执行异步请求
            // this.$http.get("data/cartData.json").then(function (res) {
            //     _this.productList = res.data.result.list;
            //     _this.totalMoney = res.data.result.totalMoney;
            // })
            // 使用es6进行编码
            let _this=this;
            //使用vue-resource执行异步请求
            //使用es6=>表达式，可以直接使用this，否则使用回调函数时，this会发生改变
            this.$http.get("data/cartData.json").then(res=> {
                this.productList = res.data.result.list;
                // this.totalMoney = res.data.result.totalMoney;
            })
        },
        //实现数量加减方法
        changeNum:function (product, way) {
            if(way >0) {
                product.productQuantity++;
            }else {
                if (product.productQuantity >1) {
                    product.productQuantity--;
                }
            }
            this.calcPrice();
        },
        //实现选中功能
        selectProduct:function (item) {
            // 判断checked属性是否存在,使用typeof可判断属性是否已经存在
            if(typeof item.checked=='undefined'){
                //1、全局注册
                // Vue.set(item,"checked",true);
                //2、局部注册,局部处理一般使用$表示
                this.$set(item, "checked", true);
            }else {
                item.checked = !item.checked;
            }
            this.calcPrice();
        },
        checkAll:function (flag) {
            this.checkAllFlag = flag;
            var _this = this;
            this.productList.forEach(function (item, index) {
                if (typeof item.checked == 'undefined') {
                    _this.$set(item, "checked", _this.checkAllFlag);
                } else {
                    item.checked = _this.checkAllFlag;
                }
            });
            this.calcPrice();
        },
        //统计总价
        calcPrice:function () {
            var _this=this;
            _this.totalMoney=0;
            this.productList.forEach(function (item, index) {
                if(item.checked) {
                    _this.totalMoney += item.productPrice * item.productQuantity;
                }
            })
        },
        //删除商品确认
        delConfirm:function (item) {
            this.curProduct = item;
            this.delFlag=true;
        },
        //删除商品
        delProduct:function () {
            var index = this.productList.indexOf(this.curProduct);
            this.productList.splice(index, 1);
            this.delFlag = false;
            this.calcPrice();
        }
    }
});
//全局过滤器
Vue.filter("money",function (value, type) {
    return "￥" + value.toFixed(2)+type;
})